<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
</head>
<body>
    
    <div>
        hello
        <p>你好 世界</p>
        world
    </div>
    <input type="text" value="能能酱酱">

    <script>
        // 1. html()
        // 等价于我们原生 JS 中的 innerHTML
        // 1-1.html() 获取
        console.log($('div').html())  //(获取内容，连同 html 标签)

        // 1-2. html() 设置
        // 语法：元素集合.html(你要设置的内容)
        // 注意：可以识别并解析 html 结构字符串
        $('div').html('<h2>我是后来设置的内容</h2>')  //(改变内容)



        // 2.text()
        // 等价于我们原生 JS 中的 innerText
        // 2-1. text() 获取
        console.log($('div').text())  //(该元素下的所有文本内容) 

        // 2-2. text() 设置
        // 语法：元素集合.text(你要设置的内容)
        // 注意：不可以识别并解析 html 结构字符串
        $('div').text('<h3>我是后来设置的内容</h3>')



        // 3. val()
        //  等价于我们原生 JS 中的 value
        // 3-1. val() 获取
        console.log($('input').val())

        // 3-2. val() 设置
        // 语法：元素集合.val(你要设置的内容)
        // 作用：用来设置该表单元素的 value 值
        $('input').val('能能酱酱2')
    </script>
    
</body>
</html>